"use client"

import { useEffect, useRef, useState } from "react"
import '@/util/index'
import '@/assets/css/home.scss'
import Image from 'next/image'
// import logo from '@/assets/img/logo.png'
// import bg5 from '@/assets/img/bg5.jpg'
import goImg from '@/assets/img/go.png'
import tel from '@/assets/img/tel.png'
import xImg from '@/assets/img/x.png'
import email from '@/assets/img/email.png'
import main2Img from '@/assets/img/main2.png'
import bg3 from '@/assets/img/bg3.png'
import idxImg from '@/assets/img/idx.png'
import vImg from '@/assets/img/dian.png'


import { WowJs } from '@/util/index'
import mapImg from '@/assets/img/map.png'
import iconImg from '@/assets/img/icon.png'
import icon1Img from '@/assets/img/icon1.png'
import icon2Img from '@/assets/img/icon2.png'
import icon3Img from '@/assets/img/icon3.png'
import icon4Img from '@/assets/img/icon4.png'
import box2Img from '@/assets/img/box2.jpg'
import tok1 from '@/assets/img/tok1.png'
import tok2 from '@/assets/img/tok2.png'
import tok3 from '@/assets/img/tok3.png'
import tok4 from '@/assets/img/tok4.png'
import maze from '@/assets/img/maze.png'
import goose from '@/assets/img/goose.png'
import boom from '@/assets/img/boom.png'
import box3Img from '@/assets/img/box3.jpg'
import box5Img from '@/assets/img/box5.jpg'
import box51Img from '@/assets/img/box5pc.jpg'
import box6Img from '@/assets/img/box6.png'
import box7Img from '@/assets/img/box7.png'
import btnImg from '@/assets/img/btn.png'
import partners from '@/assets/img/partners.png'


import StartView from '@/components/StartView';
import SwiperView from "@/components/SwiperView";


const Page = () => {

  const homeArr = [{
    name: "Generalized Abstratio",
    des: 'Web3 simplified — TOK’s Generalized Abstraction removes unfamiliar technical complexities so non-crypto natives can leverage the full potential of blockchain applications.',
    img: tok1,
  }, {
    name: "Signature & GAS Abstratio",
    des: 'A cryptographic curve-agnostic solution enabling TOK to support familiar Web2 authentication methods, such as email and biometrics, as well as all wallets from Solana, EVM, Cosmos, and beyond. In addition, it offers a gasless user experience.',
    img: tok2,
  },
  {
    name: "Powerful Protocol-level Abstracted Accounts",
    des: 'TOK’s Meta Accounts enable intuitive user experiences traditional in Web2, which include diverse authentication methods, key rotation, account recovery, cross-device usage, and more.',
    img: tok3,
  },
  {
    name: "Seamless Mobile Experlence Support",
    des: 'TOK brings the power of blockchain to your pocket. With seamless cross-device support, users can engage and transact anywhere, anytime, ensuring true accessib',
    img: tok4,
  },
  ]

  const home3Arr = [{
    name: "MAZE",
    des: 'MAZE is a web3 video social app driven by influencers, artists and high net worth users.',
    img: maze,
  }, {
    name: "GOOSE",
    des: 'An end-to-end encrypted social app based on wallet and on-chain identity. Meet various web3 scenarios.',
    img: goose,
  }, {
    name: "BOOM",
    des: 'A web3 social fundraising platform for DAOs and online communities.',
    img: boom,
  }
  ]

  const [emailVal, setemailVal] = useState('')

  const home4Arr = [{
    name: "Frictionless",
    des: 'Specially architected through generalized Abstraction to remove technical barriers so developers of all backgrounds can focus on real-time opportunities, novel use-cases, and creative applications of web3 for a variety of retail-users.',
    img: icon1Img,
  }, {
    name: "Modular",
    des: 'Our consumer-ready toolkit includes protocol-level account abstraction, signature abstraction, gas abstraction, native on-and-off ramping, direct credit/debit card purchasing, fiat denominations, cross-device support, and more to onboard all audiences.',
    img: icon2Img,
  }, {
    name: "Abastracted",
    des: 'TOK’s novel generalized abstraction at the protocol level spans Accounts, Signatures, Gas, Interoperability, Pricing, Devices, Payments, and more. By abstracting away all crypto complexities, TOK allows the development of next-generation projects bringing web3 to mainstream audiences worldwide.',
    img: icon3Img,
  }, {
    name: "Reciprocal",
    des: 'TOK-based projects will continuously benefit from the network effects of all products built on the network, creating exponential value across the entire blockchain ecosystem.',
    img: icon4Img,
  }
  ]

  useEffect(() => {
    if (WowJs) {
      WowJs?.init()
    }
  }, [])

  return <div className='homeBox'>
    <div className="home_box1">
      <div className="canvas">
        <div>
          <StartView />
        </div>
        <Image src={mapImg} alt="map" />
      </div>
      <div className="box_con1">
        <div className="content">
          <h1 className="wow fadeInUp">
            The First L1 Blockchain <br /> Built Specifically For Mass Consumer <br /> Adoption
            <span>
              <i></i>
            </span>
            </h1>
          <div className="box1_text wow fadeInUp">
            <Image src={iconImg} alt="map" />
            <SwiperView />
            <div className="shooting_star">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div className="shooting_star shooting_star_r">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="home_box2">
      <div className="content"> 
        <Image className="wow fadeInUp" src={box2Img} alt="box2Img" />
        <div className="title wow fadeInUp">
          <h3>TOK Chain</h3>
          <p>The User-First Blockchain</p>
        </div>
      </div>
      <div className="ul2 wow fadeInUp">
        <ul>
          {
              homeArr.map((item, idx) => <li key={idx}>
              <div>
                <Image src={item.img} alt="item.name" />
                <div>
                  <h5><i>0{idx+1}</i></h5>
                  <div>
                    <h4>{item.name}</h4>
                    <span>{item.des}</span>
                  </div>
                </div>
              </div>
            </li>)
          }
        </ul>
      </div>
    </div>

    <div className="home_box3">

      <div className="content">
        <div className="title wow fadeInUp">
          <h3>The Ecosystem</h3>
          <p>With over $2.8M in funding and a robust network of developers, validators, and <br /> builders, TOK is scaling the path to a frictionless Web3 future.</p>
        </div>
        <ul>
          {
            home3Arr.map((item, idx) => <li key={idx} className='wow fadeInUp'>
              <h4>{item.name}</h4>
              <p>{item.des}</p>
              <Image src={item.img} alt="TOK" />
            </li>)
          }
        </ul>
        <div className="wow fadeInUp">
          <Image src={box3Img} alt="Ecosystem" />
        </div>
      </div>
    </div>

    <div className="home_box4">
      <div className="content">
        <div className="title wow fadeInUp">
          <h3>The TOK Philosophy</h3>
          <p>Engineered for User-First Experiences</p>
        </div>
        <div className="ul4 wow fadeInUp">
          <ul>
            {
              home4Arr.map((item, idx) => <li key={idx} >
                <i></i>
                <Image src={item.img} alt="TOK" />
                <h4>{item.name}</h4>
                <p>{item.des}</p>
              </li>)
            }
          </ul>
        </div>

      </div>
    </div>

    <div className="home_box5">
      <div className="content">
        <div className="title wow fadeInUp">
          <h3>About Us</h3>
          <p>TOK is an initiative by the team at DiBase, Blockchain<br /> solution service provider</p>
        </div>
        <div className="box5_con wow fadeInUp">
          <Image src={box5Img} alt="TOK" />
          <Image className="pcImg" src={box51Img} alt="TOK" />
          <div>
            <div className="btn_box">
              <Image src={btnImg} alt="TOK" />
              <h5>
                <span>UnlockingThe Business Potential Of Blockchain</span>
              </h5>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div className="home_box6">
      <div className="content">
        <Image className="wow fadeInUp box6Img" src={box6Img} alt="box6Img" />
        
        <div className="ul">
          <div className="title wow fadeInUp">
            <h3>Extensive Partner Network</h3>
            <p>Excellent Institutional and Data Center Support Worldwide</p>
          </div>
          <Image className="wow fadeInUp" src={partners} alt="partners" />
        </div>
        <div className="title1 wow fadeInUp">
            <h3>Web3 lifestyle change It&apos;s<br /> time to reimagine the social world</h3>
            <p>The TOK chain is supported by the Singapore TOK Foundation, whose broad mission<br /> is to support the decentralization of social media. The foundation,has strong financial backing and years<br /> of blockchain technology precipitation.</p>
          </div>
      </div>
      
    </div>

    <div className="home_box7">
      <div className="content">
        <div className="box7_con">
          <Image src={box7Img} alt="TOK" className="wow fadeInUp" />
          <div className="wow fadeInUp">
            <p>We are at the beginning of another Web3 adoption cycle</p>
            <div>
              <input type="text" placeholder='EMAIL ADDRESS' value={emailVal} onChange={(ev) => {
                setemailVal(ev.target.value)
              }} />
              <Image src={goImg} alt="" />
            </div>
            
          </div>
        </div>

      </div>
    </div>

  </div>
}

export default Page;